<template>
	<view>
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx;background: rgba(0, 0, 0, 0);'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
				<navigator open-type="navigateBack" style="padding:10rpx">
					<image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
				</navigator>
				<text>我的缴费</text>
				<!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			</view>
		</view>
		<image class="body" src="../../../static/lifejfbj.png" mode=""></image>
		<view class="body1">
			<view class="top">
				<view class="top1">
					<view class="top1-1">总欠费（元）</view>
					<view class="top1-1">2022年度</view>
				</view>
				<view class="top2">
					{{money}}
				</view>
				<view class="top3">
					<view>去缴费</view>
				</view>
			</view>

			<view class="box">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" fields="year" @change="datexuanze">
					<view class="box1">
						<view class="">{{date?date:'2022'}}年</view>
						<image src="/static/xshanjiao.png" mode=""></image>
					</view>
				</picker>

				<view class="box2" v-for="(item,index) in list" key="index">
					<view class="box2-1">
						<view class="box2-1text"> <text>{{item.title}}</text></view>
						<view class="box2-1text1"><text>{{item.formatstatus}}</text></view>
					</view>
					<view class="box2-2" v-if="item.status==0">
						{{item.status==1?'账单':'欠费'}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	//首页
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				bartop: 0,
				roomId: '',
				list: [],
				money: '',
				date: currentDate,

			}
		},
		onLoad(e) {
			this.bartop = this.$bartop;
			this.roomId = e.roomId
			this.roomzhangdan()
		},
		onShow() {
			// this.date = this.dateTime()
			console.log(this.date, 'shijian');
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			roomzhangdan() {
				this.$post('center/roomzhangdan', {
					roomId: this.roomId,
					year: this.date
				}).then(res => {
					this.list = res.list
					this.money = res.money
				})
			},
			datexuanze(e) {
				this.date = e.detail.value
				console.log(e, this.date);
				this.roomzhangdan()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();

				if (type === 'start') {
					year = year - 30;
				} else if (type === 'end') {
					year = year;
				}
				return year;
			},

		}
	}
</script>

<style lang="scss">
	.body {
		width: 100vw;
		height: 100vh;
	}

	.body1 {
		position: absolute;
		top: 200rpx;
	}

	.top {
		width: 86vw;
		margin: 20rpx 7vw;

		.top1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.top1-1 {
				font-size: 18rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #F36532;
				line-height: 43px;
			}
		}

		.top2 {
			margin: 20rpx auto;
			text-align: center;
			font-size: 60rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			font-style: italic;
			color: #FE7543;
			line-height: 43px;
		}

		.top3 {
			text-align: center;
			margin: 40rpx 0;

			>view {
				margin: 0 auto;
				background-color: rgb(246, 162, 75);
				width: 251rpx;
				height: 54rpx;
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 600;
				font-style: italic;
				color: #FFFFFF;
				line-height: 54rpx;
				border-radius: 30rpx;
			}
		}
	}

	.box {
		width: 90vw;
		margin: 0rpx 5vw;
		margin-top: 80rpx;

		.box1 {
			display: flex;
			align-items: center;

			>view {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				color: #F3F2F2;
				line-height: 43px;
			}

			>image {
				margin-left: 20rpx;
				width: 34rpx;
				height: 20rpx;
			}
		}

		.box2 {
			padding: 40rpx 20rpx;
			margin-bottom: 20rpx;
			width: 90vw;
			background-color: rgb(254, 246, 237);
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.box2-1 {
				.box2-1text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #999999;
					line-height: 20px;

					>text {
						margin-right: 10rpx;
						font-size: 36rpx;
						font-family: Source Han Sans CN;
						font-weight: 600;
						color: #333333;
						line-height: 20px;
					}
				}

				.box2-1text1 {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 20px;

					>text {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #F67E01;
						line-height: 20px;
					}
				}
			}

			.box2-2 {
				width: 140rpx;
				height: 68rpx;
				border: #999999 solid 2rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #999999;
			}
		}
	}
</style>
